<template>
  <div class="header">
    <a-dropdown>
      <span class="header-global-dropdown">
        <a-icon type="global" />
      </span>
      <a-menu
        slot="overlay"
        @click="({ key }) => setLang(key)"
        :selectedKeys="[lang]"
      >
        <a-menu-item key="zh-CN">
          中文
        </a-menu-item>
        <a-menu-item key="en-US">
          English
        </a-menu-item>
      </a-menu>
    </a-dropdown>

    <a-dropdown>
      <span class="user-dropdown">
        <a-avatar class="avatar" :src="require('@/assets/images/avatar.png')" />
        <span style="margin-left: 10px;">管理员</span>
      </span>

      <a-menu slot="overlay">
        <a-menu-item key="logout">
          <a href="javascript:;" @click="logout">
            <a-icon type="logout" />
            <span style="margin-left: 10px;">退出登录</span>
          </a>
        </a-menu-item>
      </a-menu>
    </a-dropdown>
  </div>
</template>

<script>
import { mapActions, mapGetters } from "vuex";

export default {
  computed: {
    ...mapGetters(["lang"])
  },
  methods: {
    ...mapActions(["setLang"]),
    logout() {
      this.$router.push("/user/login");
    }
  }
};
</script>

<style lang="less" scoped>
.header {
  float: right;
  height: 100%;
  overflow: hidden;
  line-height: 64px;

  .header-global-dropdown {
    padding: 0 15px;
    display: inline-block;
    cursor: pointer;

    &:hover {
      background: @primary-1;
    }

    svg {
      width: 16px;
      height: 16px;
    }
  }

  .user-dropdown {
    padding: 0 15px;
    display: inline-block;
    cursor: pointer;
    &:hover {
      background: @primary-1;
    }
  }
}
</style>
